<template>
  <u-tabs :list="data.list" v-model:current="data.current" lineWidth="11" lineColor="#EF2F17" :scrollable="false"
    @change="changeTabs"></u-tabs>
  <view class="reserve-item" @click="$u.route(`/pages/houseMine/houseReserve/reserveDetail?id=${item.id}`)"
    v-for="(item,index) in list" :key="item.id">
    <view class="u-flex-y-center">
      <u-text :text="item.house.title" color="#000" bold></u-text>
      <u-text align="right" size="14" :text="status_text[item.status]" color="#F87610"></u-text>
    </view>
    <u-text margin="12rpx 0 " :text="item.house.xiaoqu" color="#333" size="14"></u-text>
    <u-text :text="`${item.house.lou_num}号楼${item.house.unit_num}单元${item.house.house_num}`" color="#666"
      size="12"></u-text>
    <view class="u-flex-y-center u-m-t-20">
      <u-text :text="`￥${item.pay_price}`" color="#DF0F0F" size="16"></u-text>
      <u-text :text="`预定时间: ${item.scheduled_time}`" color="#666" align="right" size="13"></u-text>
    </view>
  </view>
</template>

<script setup>
  import {
    computed,
    onMounted,
    ref
  } from 'vue';
  import { onReachBottom } from '@dcloudio/uni-app'
  import { user_order_lst } from '../../../config/api';
  const data = ref({
    list: [{
      name: '全部',
      state: 0
    }, {
      name: '已预订',
      state: 1
    }, {
      name: '已完成',
      state: 2
    }, {
      name: '已取消',
      state: 9
    }],
    current: 0
  })
  const list = ref([])
  const status_text = ref({ 1: '已预订', 2: '已完成', 9: '已取消', })
  const params = ref({
    page: 1,
    limit: 10,
    state: computed(() => data.value.list[data.value.current].state)
  })
  onMounted(() => {
    _user_order_lst()
  })
  onReachBottom(() => {
    params.value.page++
    _user_order_lst()
  })
  // tabs切换
  const changeTabs = () => {
    params.value.page = 1
    _user_order_lst()
  }
  // 我的预定列表
  const _user_order_lst = () => {
    user_order_lst(params.value).then(res => {
      if (params.value.page == 1) list.value = res.data.data
      else list.value = list.value.concat(res.data.data)
    })
  }
</script>

<style lang="scss" scoped>
  .reserve-item {
    background: #fff;
    border-radius: 24rpx;
    padding: 20rpx;
    margin: 20rpx;
  }
</style>